<template>
  <div class="menu-item">
    <!-- 没有children -->
    <MenuItem :name="parentItem.name" v-if="!children || children.length == 0">
      {{ parentItem.name }}
    </MenuItem>
    <!-- 有children -->
    <Submenu :name="`${parentName}`" v-else>
      <template slot="title">
        {{ parentItem.name }}
      </template>
      <template v-for="item in children">
        <template v-if="item.children && item.children.length === 1">
          <side-menu-item
            :key="`menu-${item.name}`"
            :parent-item="item"
          ></side-menu-item>
        </template>
        <template v-else>
          <MenuItem :name="parentItem.name" v-if="!item.children || item.children.length == 0" :key="`menu-${item.name}`">
            {{ item.name }}
          </MenuItem>
        </template>
      </template>
    </Submenu>
  </div>
</template>

<script>
export default {
  name:"SideMenuItem",
  props: {
    parentItem: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  computed: {
    parentName() {
      return this.parentItem.name;
    },
    children() {
      return this.parentItem.children;
    },
  },
};
</script>

<style>
</style>